<template>
	<view class="home-main">
		<uni-nav-bar class="head-nav" fixed :backgroundColor="headColor">
			<view class="title">
				<!-- <text class="nav-item" :class="{active:show==1}" @tap="show=1">推荐</text> -->
				<!-- <text class="nav-item" :class="{active:show==2}" @tap="show=2">品牌</text> -->
			</view>
			<view slot="left">
				<!-- #ifdef MP-WEIXIN -->
				<button class="btn-chat" open-type="contact" bindcontact="handleContact">
					<!-- <image class="icon icon-chat" src="../../static/icons/chat.png"></image> -->
				</button>

				<!-- #endif -->

			</view>
			<view slot="right" class="head-nav-right">
				<navigator class="nav-search" url="/pages/other/search/index">
					<image class="icon icon-search" src="../../static/icons/search.png"></image>
				</navigator>
				<navigator class="nav-cart" url="/pages/buyCart/index">
					<image class="icon icon-cart" src="../../static/icons/cart.png"></image>
				</navigator>
			</view>
		</uni-nav-bar>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar" v-if="show==2">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view v-show="show==1" class="section-home">
			<view class="section-banner">

				<swiper class="swiper-banner" previous-margin="0rpx" :indicator-dots="true" :autoplay="true" :interval="3000"
				 :duration="400">
					<swiper-item v-for="m in bannerList" :key="m.id">
						<view class="swiper-item">
							<image class="img" :src="m.pic" mode="scaleToFill"></image>
						</view>
					</swiper-item>

				</swiper>
			</view>
			<!-- 分类 -->
			<div class="section-kinds">
				<navigator v-for="item in kindList" class="kind-block" :key="item.id" :url="'/pages/kind/product/index?kindId='+item.id">
					<image class="icon-kind" :src="item.icon"></image>
					<p class="kind-text">{{item.name}}</p>
				</navigator>
			</div>
			<!-- 通告 -->
			<div class="section-notify">
				<image src="../../static/icons/notify.png" class="icon-notify"></image>
				<text class="text">限时活动: </text>
				<swiper class="swiper recommend-swiper" :circular="true" :vertical="true" :indicator-dots="false" :autoplay="true"
				 :interval="2000" :duration="1000">
					<swiper-item v-for="item in lejuRecommendList" :key="item.id" class="recommend-item">
						<navigator class="nav-item" :url="'../kind/detail/index?productId='+item.productId" >
							<view class="product-name">{{item.name}}</view>
							<view class="product-price">
								<view class="text" style="text-decoration: line-through;color:#333;">{{item.price}}元</view>
								<view class="text" style="color:red;">现价: {{item.promotionPrice}}元</view>
							</view>
						</navigator>
						

					</swiper-item>

				</swiper>
			</div>

			<!-- A:推荐最热商品 -->
			<div class="section-series">
				<div class="common-title">
					<text class="title">热门推荐</text>
				</div>
				<!-- 过渡动效通过css3 实现   -->
				<view class="box" :style="{height:`${rmtjHeight}rpx`}">
					<swiper class="scroll-series" 
					:display-multiple-items="3" 
					:circular="true" 

					:interval="3000" 
					easing-function="linear" :duration="3000">
						<swiper-item  class="series-block" v-for="item in hotList" :key="item.id">
							<image class="image" :src="item.pic" mode=""></image>
							<div class="cname">{{item.name}}</div>
							<div class="ename">{{item.ename}}</div>
						</swiper-item>
					</swiper>
					<!-- <view class="scroll-series left" :style="{width:`${hotList.length * 248}rpx`}">
						<view @tap="goSeries(item.id)" class="series-block" v-for="item in hotList" :key="item.id">
							<image class="image" :src="item.pic" mode=""></image>
							<div class="cname">{{item.name}}</div>
							<div class="ename">{{item.ename}}</div>
						</view>
					</view>
					<view class="scroll-series right" :style="{width:`${hotList.length * 248}rpx`}">
						<view @tap="goSeries(item.id)" class="series-block" v-for="item in hotList" :key="item.id">
							<image class="image" :src="item.pic" mode=""></image>
							<div class="cname">{{item.name}}</div>
							<div class="ename">{{item.ename}}</div>
						</view>
					</view> -->
				</view>
				
				<!-- <scroll-view class="scroll-series" scroll-x="true">
					<view @tap="goSeries(item.id)" class="series-block" v-for="item in hotList" :key="item.id">
						<image class="image" :src="item.pic" mode=""></image>
						<div class="cname">{{item.name}}</div>
						<div class="ename">{{item.ename}}</div>
					</view>
				</scroll-view> -->
			</div>
			<!-- 推荐新品列表 -->
			<div class="section-series">
				<div class="common-title">
					<text class="title">新品推荐</text>
					<!-- <text class="more" @tap="seriesMore">更多></text> -->
				</div>
				<scroll-view class="newProduct" scroll-x="true"  >
					<view @tap="goSeries(item.id)" class="series-block" v-for="item in lejuLatestProductsList" :key="item.id">
						<image class="image" :src="item.pic" mode=""></image>
						<div class="newProductBox">
							<div class="cname">{{item.name}}</div>
							<!-- <view class="squote">
								<view class="dots" v-for="ele in item.squote" :key="ele" :style="{background:ele}"></view>
							</view> -->
							<div class="ename">价格：{{item.price}}</div>
						</div>
						
					</view>
				</scroll-view>
			</div>


			<div class="section-hot">
				<div class="common-title">
					<text class="title">猜你喜欢</text>
				</div>

				<ProductList :data="saleMostProductsList"></ProductList>
				<!-- <uniLoadMore :status="more"></uniLoadMore> -->
			</div>

		</view>
		<view v-show="show==2" class="section-brand">
			<Brands :brandList="brandList"></Brands>
		</view>

	</view>
</template>

<script>
	import homeApi from '@/api/home'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import Brands from './brand/index.vue'
	import findApi from '@/api/find/index.js'
	import ProductList from './productList/index.vue'
	import kindApi from '@/api/kind'

	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			uniNavBar,
			Brands,
			ProductList,
			uniLoadMore
		},
		data() {
			return {
				lejuRecommendList: [],
				lejuLatestProductsList: [],
				saleMostProductsList: [],
				bannerList: [],
				recommendList:[],
				brandList: [],
				show: 1,
				series: [],
				hotList: [],
				productList: [],
				timeStr: '0天0小时0分0秒',
				kindList: [],
				start: 1,
				limit: 10,
				left:0,
				rmtjHeight:"",
				more: 'more', //@value more loading前  	@value loading loading中  	@value noMore 没有更多了
			}
		},
		// onReady() {
		// 	setInterval(()=>{
		// 		this.left = this.left + 2
		// 	},60)
		// },
		computed: {
			headColor() {
				return this.show == 1 ? 'transparent' : '#354E44';
			}
		},
		onLoad() {
			this.initData();
			// 注意: 苹果手机上小程序不支持  2020-10-01 写法
			this.startCountDonw(new Date('2021/10/01 00:00:00'));
		},
		onPullDownRefresh() {
			this.initData();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1600)
		},
		// onReachBottom(){
		// 	this.getProductList()
		// },
		methods: {
			initData() {
				this.getBanners();
				// 限时活动
				this.lejuRecommend();
				// 热门推荐(推荐最热列表)
				this.getHotList();
				// 新品推荐(推荐新品列表)
				this.lejuLatestProducts();
				// 最高销量推荐
				this.saleMostProducts();
				// 商品分类
				this.getKindList();



			},
			async lejuRecommend() {
				var {
					data
				} = await homeApi.recommendList();
				this.lejuRecommendList = data.items;
			},
			async lejuLatestProducts() {
				var {
					data
				} = await homeApi.lejuLatestProducts();
				data.productList.forEach(ele =>{
					var arr = []
					var num = Math.ceil(Math.random()*5);
					for(var i = 0;i<num;i++){
						arr.push(`rgb(${Math.ceil(Math.random()*255)},${Math.ceil(Math.random()*255)},${Math.ceil(Math.random()*255)})`)
					}
					ele.squote = arr
				})
				this.lejuLatestProductsList = data.productList;
			},
			async saleMostProducts() {
				var {
					data
				} = await homeApi.saleMostProducts();
				this.saleMostProductsList = data.items;
			},
			async getBanners() {
				var {
					data
				} = await homeApi.bannerList();
				this.bannerList = data.items;
			},

			async getBrandList() {
				var {
					data
				} = await homeApi.brandList({
					start: 1,
					limit: 10
				});
				this.brandList = data;
			},
			getProductList() {
				homeApi.productList({
						start: this.start,
						limit: this.limit
					})
					.then(res => {
						this.productList = res.data.rows;
						if (res.data.rows.length != 0) {
							this.start++;
							this.more = 'loading';

						} else {
							this.more = 'noMore';
						}

					})
			},
			getSeriesAll() {
				findApi.seriesAll()
					.then(res => {
						this.series = res.data
					})
			},
			goSeries(sId) {
				// #ifdef H5
				window.sId = sId;
				// #endif
				uni.navigateTo({
					url: '/pages/kind/detail/index?productId=' + sId
				});
			},
			getHotList() {
				var that = this;
				homeApi.hotList({
						start: 1,
						limit: 10
					})
					.then(res => {
						// res.data.items.forEach(ele =>{
						// 	ele.id = "1313379792282292226"
						// })
						console.log(res, 111)
						this.hotList = res.data.items;
						this.$nextTick(()=>{
							const query = uni.createSelectorQuery().in(this);
							query.select('.series-block').boundingClientRect(data => {
								that.rmtjHeight = data.height*2;
							  // console.log("得到布局位置信息" + data.height);
							  // console.log("节点离页面顶部的距离为" + data.top);
							}).exec();
						})
					})
			},
			seriesMore() {
				uni.switchTab({
					url: '../find/index'
				})
			},
			startCountDonw(endTime) {
				var endTimeLong = endTime.getTime();

				const SM = 1000;
				const MM = 60 * SM;
				const HM = 60 * MM;
				const DM = 24 * HM;
				var timer = setInterval(() => {
					var nowTimeLong = new Date().getTime();
					var cha = endTimeLong - nowTimeLong;
					if (cha <= 0) {
						clearInterval(timer)
					}
					var day = Math.floor(cha / DM);
					var hour = Math.floor((cha % DM) / HM);
					var min = Math.floor((cha % HM) / MM);
					var sec = Math.floor((cha % MM) / SM);
					this.timeStr = day + '天' + hour + '小时' + min + '分' + sec + '秒';

				}, 1000)
			},
			handleContact(e) {},
			getKindList() {
				kindApi.kindList()
					.then(res => {
						this.kindList = res.data.category.children;
					})
			},

		}


	}
</script>
<!-- 
	沉浸式说明:
	1. uniapp默认为沉浸式体验 无法取消 参考: https://ask.dcloud.net.cn/question/69469
	2. 如果取消原生导航头(),需要自己实现沉浸式造成的内容遮挡头部状态栏的问题 参考: https://ask.dcloud.net.cn/article/34921
		2.1 取消原生导航头: 当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。 参考: https://uniapp.dcloud.io/frame?id=css%e5%8f%98%e9%87%8f
		2.2 填充状态栏高度,可以通过uniapp自定义的变量来设置:  var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。 
	3. 不同平台,h5/app/微信小程序 可以根据测试,配合 条件编译来实现各自的需求. 参考: https://uniapp.dcloud.io/platform?id=pagesjson-%e7%9a%84%e6%9d%a1%e4%bb%b6%e7%bc%96%e8%af%91
	 
 -->
<style scoped lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #354E44;
	}

	.lejuRecommend {
		display: flex;
		align-items: center;
		width: calc(100% - 80rpx)!important;
		padding: 0 40rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}

		.title {
			font-size: 20px;
		}

		.info {
			font-size: 14px;
			text{
				color: red;
				margin-right: 4px;
			}
		}
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #354E44;
		top: 0;
		z-index: 999;
	}

	.home-main {
		.head-nav {
			background-color: $leju-base-bg-color;
			background-color: transparent;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			top: var(--status-bar-height);
			/* #ifdef MP-WEIXIN */
			top: 0;
			/* #endif */
			z-index: 999;
			border-bottom: none;

			::v-deep .uni-navbar--border {
				border-bottom: none;
			}


			.btn-chat {
				background-color: transparent;
				border: none;
				text-align: center;
				width: 50rpx;
				height: 44rpx;
				line-height: 44rpx;
				outline: none;
				background-image: url('../../static/icons/chat.png');
				background-repeat: no-repeat;
				background-position: center;
				background-size: 44rpx 44rpx;
			}

			.title {
				width: 100%;
				display: flex;
				justify-content: center;

				.nav-item {
					font-size: 32rpx;
					color: #fff;
					line-height: 45rpx;
					margin: 0 20rpx;
					padding-bottom: 12rpx;

					&.active {
						border-bottom: 2px solid #fff;
					}
				}
			}

			.icon {
				width: 36rpx;
				height: 36rpx;

				&.icon-chat {
					margin-left: 20rpx;
				}

				&.icon-search {
					margin-right: 40rpx;
				}
			}

			.head-nav-right {
				display: flex;
				justify-content: space-between;
				align-items: center;

				image,
				img {
					width: 36rpx;
					height: 36rpx;
				}
			}

		}

		.common-title {
			font-size: 32rpx;
			color: #3E3E3E;
			line-height: 44rpx;
			margin: 40rpx auto;
			box-sizing: border-box;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-family: PingFangSC-Semibold;
				font-size: 32rpx;
				color: #3E3E3E;
				letter-spacing: 2.29rpx;
				font-weight: 600;
			}

			.more {
				font-size: 26rpx;
				color: #8C8C8C;
			}
		}

		.section-banner {
			width: 100%;
			height: 470rpx;

			.top-bar {
				width: 100%;
				height: 88rpx;
				background-color: green;
			}

			.swiper-banner {
				width: 100%;
				height: 470rpx;

				.swiper-item {
					width: 750rpx;
					height: 100%;
					border-radius: 0 0 30rpx 30rpx;
					overflow: hidden;
					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.section-kinds {
			width: 100%;
			margin: 60rpx auto;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.kind-block {
				width: 120rpx;
				text-align: center;

				.icon-kind {
					width: 80rpx;
					height: 80rpx;
				}

				.kind-text {
					font-size: 32rpx;
					color: #3E3E3E;
					text-align: center;
				}
			}
		}

		.section-notify {
			// position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 670rpx;
			height: 96rpx;
			margin: 40rpx auto;
			background-color: #fff;
			font-size: 28rpx;
			color: #3E3E3E;
			line-height: 96rpx;
			text-indent: .5em;

			.icon-notify {
				width: 48rpx;
				height: 48rpx;
				margin-left: 30rpx;
				animation: notifyA .5s 1s linear infinite both;
			}

			.text {
				font-weight: 600;
				color: orange;
			}

			.recommend-swiper {
				// width: calc(100% - 268rpx);
				flex: 1;
				height: 96rpx;
				.recommend-item{
					.nav-item{
						display: flex;
						width: 100%;
						height: 100%;
						justify-content: flex-start;
						align-items: center;
					}
					.product-name {
						width: 250rpx;
						display: inline-block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.product-price{
						.text{
							font-size: 24rpx;
							line-height: 30rpx;
						}
					}
				}
				
			}

		}

		.section-series {
			width: 100%;
			.newProduct{
				// height: 314rpx;
				white-space: nowrap;
				// /deep/ .uni-scroll-view-content{
				// 	// display: flex;
				// 	// align-items: center;
				// 	// justify-content: flex-start;
				// 	white-space: nowrap;
				// }
				.series-block{
					width: 590rpx;
					// height: 314rpx;
					// padding-top: 54rpx;
					display: inline-block;
					margin: 0 20rpx;
					position: relative;
					// display: flex;
					// align-items: flex-end;
					
					.image{
						position: absolute;
						left: 44rpx;
						top: 0;
						bottom: 0;
						width: 194rpx;
						height: 168rpx;
						border-radius: 8rpx;
						margin: auto;
					}
					.newProductBox{
						// width: 100%;
						padding-left: 270rpx;
						padding-top: 50rpx;
						padding-bottom: 50rpx;
						height: 160rpx;
						background: #FFFFFF;
						box-shadow: 0 16rpx 48rpx 0 rgba(122,98,75,0.12);
						border-radius: 20rpx;
						display: flex;
						flex-wrap: wrap;
						
						justify-content: space-between;
						flex-direction: column;
						.cname,.ename{
							font-family: PingFangSC-Semibold;
							font-size: 26rpx;
							color: #3E3E3E;
							letter-spacing: 1.86rpx;
							// overflow: hidden;
							// text-overflow: ellipsis;
							// white-space: break-spaces;
							width: 100%;
						}
						.cname{
							height: 72rpx;
							// overflow: hidden;
							display: -webkit-box;
							    -webkit-line-clamp:2;
							    overflow: hidden;
							    text-overflow: ellipsis;
							    -webkit-box-orient: vertical;
							    white-space: normal;
						}
						.squote{
							display: flex;
							align-items: center;
							margin: 20rpx 0;
							.dots{
								width: 20rpx;
								height: 20rpx;
								border-radius: 100%;
								margin: 0 4rpx;
							}
						}
					}
				}
			}
			.box{
				display: flex;
				align-items: center;
				position: relative;
				overflow: hidden;
			}
			.left,.right{
				position: absolute;
				left: 0;
				top: 0;
			}
			.left{
				
				animation: fir 20s linear infinite;
				animation-delay: 2s;
			}
			.right{
				animation: sec 20s linear infinite;
				animation-delay: 20s;
			}
			@keyframes fir {
			  0% {
			    transform: translateX(0);
			  }
			  100% {
			    transform: translateX(-100%);
			  }
			}
			@keyframes sec {
			  0% {
			    transform: translateX(100%);
			  }
			  100% {
			    transform: translateX(0%);
			  }
			}
			.left {
			  -webkit-animation: fir 20s linear infinite;
			  animation: fir 20s linear infinite;
			}
			.right {
			  -webkit-animation: sec 20s linear infinite;
			  animation: sec 20s linear infinite;
			}
			.scroll-series {
				width: 100%;
				white-space: nowrap;
				display: flex;
				align-items: center;
				
				.series-block {
					display: inline-block;
					margin: 0 20rpx;
					width: 208rpx;

					.image {
						width: 208rpx;
						height: 176rpx;
					}

					.cname {
						font-size: 26rpx;
						line-height: 38rpx;
						color: #3E3E3E;
						text-align: center;
						margin-top: 20rpx;
						font-weight: 600;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.ename {
						font-size: 20rpx;
						color: #B0B0B0;
						line-height: 28rpx;
						text-align: center;
					}
				}
			}
		}

		.section-hot {
			margin-bottom: 60rpx;

			.swiper {
				width: 100%;
				height: 314rpx;

				.hot-swiper-item {
					position: relative;
					width: 590rpx;
					height: 314rpx;

					.image {
						position: absolute;
						left: 44rpx;
						top: 0;
						width: 194rpx;
						height: 280rpx;
						border-radius: 10rpx;
					}

					.inner-card {
						margin-top: 50rpx;
						width: 590rpx;
						height: 260rpx;
						background-color: #fff;
						border-radius: 20rpx;

						.info {
							width: 316rpx;
							height: 100%;
							box-sizing: border-box;
							padding: 36rpx;
							margin-left: 274rpx;

							.gname {
								font-size: 26rpx;
								line-height: 38rpx;
								font-weight: 600;
							}

							.sub-gname {
								white-space: nowrap;
								overflow: hidden;
								font-size: 18rpx;
								color: #B0B0B0;
								line-height: 36rpx;
							}

							.dotts {
								width: 100%;
								height: 40rpx;
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.dott {
									width: 20rpx;
									height: 20rpx;
									border-radius: 50%;
									margin-right: 16rpx;
								}
							}

							.descr {
								font-size: 22rpx;
								line-height: 30rpx;
								margin-top: 12rpx;
								white-space: nowrap;
								overflow: hidden;
							}
						}
					}


				}
			}

		}


		.section-brand {
			margin-top: 100rpx;
		}

	}

	@keyframes notifyA {
		from {
			opacity: .5;
		}

		to {
			opacity: 1;
		}
	}
	
</style>
